<template>
  <div class="home">
    <NavBar class="navBar">
      <div slot="center">首页</div>
    </NavBar>
     
    <BScrolls class="HomeBScroll" ref="topScroll" @BScroll="scrollMethods" @pageadd="pageadd">
     
      <Charts :arr='arrs'></Charts>
      <Like></Like>
      <ScrollTitle :pop="arr" ref='scrollTitle'></ScrollTitle>
      
    </BScrolls>
    <Top @click.native="backTop" v-show="isShow"></Top>
    <!-- <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul> -->
   
  </div>
</template>

<script>
import NavBar from '../../components/content/nav/nav.vue';
import BScrolls from '../../components/common/BScroll/BScroll.vue'

import Charts from "../../components/common/charts/Chart.vue";
import ScrollTitle from '../../components/content/scroll/ScrollTitle.vue'
import Top from '../../components/content/top/Top.vue'



import Like from './Like.vue';

export default {
  data(){
    return {
      arr:['pop','new','select'],
      isShow:false,
      // nums:0
      isshowTitle:null,
      scroll:0,
       arrs:[
        {imgs:require("../../assets/img/chart/1.webp")},
        {imgs:require("../../assets/img/chart/2.jpg")},
        {imgs:require("../../assets/img/chart/3.png")},
        {imgs:require( "../../assets/img/chart/4.jpg")}
      ]
    }
  },
 
  activated(){
    this.$refs.topScroll.BScroll.refresh()
    this.$refs.topScroll.scrollTo(0,this.scroll,0)
    
     this.$refs.topScroll.BScroll.refresh()
     
  },
 deactivated(){
    // console.log(this.$refs.scrollTitle.goods)
     this.$bus.$emit('shoppings',this.$refs.scrollTitle.goods)
    //  console.log(this.$refs.scrollTitle.goods)
    //  console.log('操作')
  },
  // deactivated(){
  //   this.$bus.$emit('shopping',this.$refs.scrollTitle.goods)
  // },
  
  beforeRouteLeave(to,from,next){
    // console.log(this.$refs.scrollTitle.goods.pop)
     this.scroll=this.isshowTitle;

    
      // this.$bus.$emit('shopping',this.$refs.scrollTitle.goods)
     next()
  },

 mounted(){
// console.log(this.$refs.scrollTitlecopy.$refs.scrolls1)
// console.log(this.$refs.scrollTitlecopy.refs)
//   delete(this.$refs.scrollTitlecopy.refs)
//   console.log(this.$refs.scrollTitlecopy.refs)
//   console.log(this.$refs.scrollTitlecopy.$el)
  //  console.log(this.$refs.scrollTitlecopy.$el)
//  console.log(this.$refs.scrollTitlecopy.refs)
  // this.$bus.$on('detailsNav',()=>{
  //   this.$refs.topScroll.BScroll.refresh()
  // })
   
  
 },

 updated(){
    this.$bus.$on('imgLoad',()=>{
      // console.log('11')
      //  this.debounce()
      this.$refs.topScroll.BScroll.refresh()
     
    })
  },
  computed:{
    isShowTitle(){
      return this.isshowTitle<=-433
    }
  },
  components: {
    Charts,
    NavBar,
    Like,
    ScrollTitle,
    BScrolls,
    Top
 
    
  },
  methods:{
    spanClicks(index){
      // console.log(index)
      // console.log(this.$refs.scrollTitle.countIndex)
      
      this.$refs.scrollTitlecopy.countIndex=index;
      this.$refs.scrollTitle.countIndex=index;
    },
  //   //防抖refresh函数
  //   debounce(){
  //     let clear = null;
  //   //  return function(){
  //       if(clear){
  //       clearTimeout(clear);
  //     }
  //     clear = setTimeout(()=>{
  //       // console.log(this)
  //       //  fun.apply(this)
  //       this.$refs.topScroll.BScroll.refresh()
  //     },500)
  //   //  } 
      
  //   },
    backTop(){
      this.$refs.topScroll.scrollTo(0,0,1000)
    },
    scrollMethods(position){
 
      this.isShow=(-position.y)>600;
      this.isshowTitle = position.y
      // console.log(this.isshowTitle)
    },
    pageadd(){
      // console.log( this.$store.state.index)
      this.$store.commit('indexadd')
    
      this.$refs.scrollTitle.scrollList()
    //  if(this.$store.state.index<this.$refs.scrollTitle.scrollListLength){
    //    console.log(this.$store.state.index)
    //    console.log(this.$refs.scrollTitle.scrollListLength)
    //       this.$refs.scrollTitle.scrollList()
          
    //   }else{
    //     console.log('qq')
    //     // this.$store.state.index=this.$refs.scrollTitle.scrollListLength-1
    //   //  this.$refs.scrollTitle.scrollList=null
    //   }
     
      // this.homeInde+1
      // console.log(this.$refs.scrollTitle.index);
      // this.homeInde+1
    }
  }
 
 
};
</script>

<style scoped>

  .scrollTitle{
    position: fixed;
    top:44px;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 2;
  }
  .home{
    height: 100vh;
  }
  .navBar{
    background-color: #f00;
  }
  .HomeBScroll{
    position: absolute;
    top: 44px;
    left: 0px;
    right: 0;
    height:calc(100% - 93px); 
    /* border: 2px solid rgb(61, 53, 57); */
    overflow: hidden;
   
  }
</style>